/** lib **/
import { reactive, onMounted, computed } from 'vue'
/** util **/
import { getBase64Image } from '../../../assets/ts/util'

interface img {
  url: string
  alt: string
  loading: Boolean
}

export default (imgs: Array<img>) => {
  // imgList
  const imgList = reactive(imgs)
  // allLoading
  const allLoading = computed(() => {
    for (let img of imgList) {
      if (img.loading) {
        return true
      }
    }
    return false
  })
  // onMounted Hooks
  onMounted(() => {
    for (let img of imgList) {
      let bgimg = new Image()
      bgimg.src = img.url
      bgimg.setAttribute('crossOrigin', 'Anonymous')
      let i = setInterval(() => {
        if (bgimg.complete) {
          clearInterval(i)
          img.url = getBase64Image(bgimg)
          img.loading = false
        }
      }, 1000)
    }
  })
  // @returns
  return {
    imgList,
    allLoading,
  }
}
